<template>
	<view class="page-box">
		<view class="haed-box">
			<view class="money-info-box">
				<view class="money-info-top">
					<view class="all-earnings-box">
						<view class="arnings-title">
							总收益(元)
						</view>
						<view class="earnings-value">
							{{allEarnings}}
						</view>
					</view>
<!--					<view class="withdraw-btn-box" @click="withdrawClick">
						提现
					</view>-->
				</view>
				<view class="money-info-bottom">
          <view class="all-earnings-box">
            <view>
              <view class="arnings-title">
                待收益(元)
              </view>
              <view class="earnings-value">
                {{accountMoney}}
              </view>
            </view>
            <view>
              <view class="arnings-title">
                钱包(元)
              </view>
              <view class="earnings-value">
                {{withdrawMoney}}
              </view>
            </view>
          </view>
          <view class="withdraw-btn-box" @click="withdrawClick">
            提现
          </view>
				</view>
			</view>
		</view>
		<view class="tab-box">
			<view class="tab-item-box" v-for="(item,index) in tabData" :key='index'
				:class="pitchTab == item.id ? 'tab-pitch-box' : 'tab-un-pitch-box'" @click="tabClick(item)">
				{{item.name}}
			</view>
		</view>
			<scroll-view class="content-box" scroll-y lower-threshold='100' :refresher-enabled='true'
				:refresher-triggered='isRefresher' @scrolltolower='scrolltolower' @refresherrefresh='refresherrefresh'>
			<view class="content-item-box" v-for="(item,index) in tableData" :key='index'>
				<view class="left-content">
					<text class="title-text">{{item.goods_name}}</text>
					<text class="time-text">{{item.createtime_text}}</text>
				</view>
				<text class="money-text">{{item.commission_price}}元</text>
			</view>
			</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabData: [{
					name: '全部',
					id: 0
				}, {
					name: '待入账',
					id: 1
				}, {
					name: '已入账',
					id: 2
				}],
				pitchTab: 0,
				tableData: [{
						title: '获得佣金',
						time: '2022-05-25',
						money: '22'
					},
					{
						title: '获得佣金',
						time: '2022-05-25',
						money: '22'
					},
					{
						title: '获得佣金',
						time: '2022-05-25',
						money: '22'
					},
					{
						title: '获得佣金',
						time: '2022-05-25',
						money: '22'
					},
					{
						title: '获得佣金',
						time: '2022-05-25',
						money: '22'
					},
					{
						title: '获得佣金',
						time: '2022-05-25',
						money: '22'
					},
					{
						title: '获得佣金',
						time: '2022-05-25',
						money: '22'
					},
				],
				allEarnings: '0', //总收益
				accountMoney: '0',
				withdrawMoney: '0',
				page:1,
				total:0,
				isRefresher:false
			}
		},
		onLoad(option) {
			console.log(option)
			this.accountMoney = option.commission_price || 0
			this.withdrawMoney = option.money || 0
		},
		onShow() {
			this.getCommissionDetail(false)
		},
		methods: {
			tabClick(item) {
				this.pitchTab = item.id || 0
				this.page = 1
				this.getCommissionDetail(false)
			},
			// 滚动到底部
			scrolltolower() {
				this.page++
				this.getCommissionDetail(false)
			},
			// 下拉刷新
			refresherrefresh() {
				this.page = 1
				this.getCommissionDetail(true)
			},
			withdrawClick(){
				console.log('提现。。。')
				uni.navigateTo({
					url: '/pages/withdrawDeposit/withdrawDeposit'
				});
			},
			getCommissionDetail(status){
				let params = {
					page:this.page,
					type:this.pitchTab
				}
				this.isRefresher = status
				this.$http.post('api/bonus/commissionList',params).then((res)=>{
					console.log(res)
					let data = res.data
					this.allEarnings = data.sum || '0'
					this.total = data.data.total || 0
					if(this.page == 1){
						this.tableData = data.data.data || []
					}else{
						this.tableData.concat(data.data.data || [])
					}
				this.isRefresher = false
				}).catch((err)=>{
					console.log(err)
					this.allEarnings = '0'
					this.total = 0
					this.tableData = []
				this.isRefresher = false
				})
			}
		}
	}
</script>
<style>
	.page-box {
		width: 100%;
		height: 100%;
	}

	.haed-box {
		width: 100%;
		height: 192px;
		background: url(../../static/commission-haed-bg.png);
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.money-info-box {
		width: calc(100% - 32px);
		height: 176px;
		border-radius: 8px 8px 0px 0px;
		background: url(../../static/commission-info-bg.png);
		background-size: 100% 100%;
		padding: 16px;
		box-sizing: border-box;
	}

	.money-info-top {
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: space-between;
	}

	.all-earnings-box {
		width: calc(100% - 80px);
		height: 100%;
	}

	.arnings-title {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #632E0D;
	}

	.earnings-value {
		margin-top: 8px;
		height: 32px;
		line-height: 32px;
		font-size: 24px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #632D08;
	}

	.withdraw-btn-box {
		width: 66px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		background: #FFFFFF;
		border-radius: 16px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #8A3E0B;
	}

	.money-info-bottom {
		width: 100%;
		height: 50%;
		display: flex;
	}
  .money-info-bottom>.all-earnings-box{
    display: flex;
  }
	.money-info-bottom>.all-earnings-box>view {
		width: 50%;
		height: 100%;
	}
	.tab-box {
		width: 100%;
		height: 68px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.tab-item-box {
		width: 96px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		border-radius: 16px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
	}

	.tab-pitch-box {
		border: 1px solid #020202;
		background: #020202;
		color: #FFFFFF;
	}

	.tab-un-pitch-box {
		border: 1px solid #E5E5E5;
		color: #8E8E8E;
	}

	.content-box {
		width: 100%;
		height: calc(100% - 260px);
		overflow-y: scroll;
	}

	.content-item-box {
		width: 100%;
		height: 64px;
		padding: 14px 16px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
		border-bottom: 1px solid #E5E5E5;
	}

	.left-content {
		width: 60%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.title-text {
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #010101;
	}

	.time-text {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B5B5B5;
	}

	.money-text {
		font-size: 16px;
		font-family: Helvetica;
		color: #333333;
	}
</style>
